<template>
  <div id="div">
    <el-container>
      <!-- 头部-->
      <el-header class="el-header">
        <el-container>
          <div>
            <el-image src="../static/export.png" class="header-img"></el-image>
          </div>
          <el-menu
            mode="horizontal"
            background-color="#545c64"
            text-color="white"
            active-text-color="#ffd04b"
            style="margin-left: auto"
          >
            <el-menu-item index="1">处理中心</el-menu-item>
            <el-submenu index="2">
              <template slot="title">我的工作台</template>
              <el-menu-item index="2-1">选项1</el-menu-item>
              <el-menu-item index="2-2">选项2</el-menu-item>
              <el-menu-item index="2-3">选项3</el-menu-item>
            </el-submenu>
            <el-menu-item index="3"
              ><a href="#/" target="_self">首页</a></el-menu-item
            >
            <el-menu-item index="4"
              ><a href="#/login" target="_self">登录</a></el-menu-item
            >
            <el-menu-item index="5"
              ><a href="#/register" target="_self">注册</a></el-menu-item
            >
            <el-menu-item index="6"
              ><a href="#/exitLogin" target="_self" @click="exitLogin()"
                >退出登录</a
              ></el-menu-item
            >
          </el-menu>
        </el-container>
      </el-header>

      <!-- 中间部分 -->
      <el-container style="height: 580px; border: 1px solid #eee">
        <!-- 侧边栏 -->
        <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
          <el-menu :default-openeds="['1']">
            <el-submenu index="1">
              <template slot="title"
                ><i class="el-icon-menu"></i>用户列表</template
              >
              <el-menu-item-group>
                <!--
                        TODO: 点击执行
                      -->
                <el-menu-item index="1-1"
                  ><i class="el-icon-help"></i>
                  <a href="#/userlist">用户管理</a></el-menu-item
                >
              </el-menu-item-group>
            </el-submenu>
            <el-submenu index="2">
              <template slot="title"
                ><i class="el-icon-menu"></i>角色列表</template
              >
              <el-menu-item-group>
                <el-menu-item index="2-1"
                  ><i class="el-icon-help"></i
                  ><a href="#/rolelist">角色管理</a></el-menu-item
                >
              </el-menu-item-group>
            </el-submenu>
            <el-submenu index="3">
              <template slot="title"
                ><i class="el-icon-menu"></i>权限列表</template
              >
              <el-menu-item-group>
                <el-menu-item index="3-1"
                  ><i class="el-icon-help"></i
                  ><a href="#/permissionlist">权限管理</a></el-menu-item
                >
              </el-menu-item-group>
            </el-submenu>
          </el-menu>
        </el-aside>

        <el-container>
          <!-- 主区域部分 TODO -->
          <el-main>
            <router-view />
          </el-main>
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      activeIndex: 1,
    };
  },
  methods: {
    exitLogin() {
      //发送axios请求  退出登录
      axios.post("/exitLoginServlet").then((resp) => {
        let obj = resp.data;
        if (obj.flag == false) {
          //提示未登录信息，跳转登录页面
          this.$message.error(obj.message);
          location.href = "#/login";
        } else {
          //退出登录成功,跳转到登录页面
          this.$message({
            message: obj.message,
            type: "success",
          });
          location.href = "#/login";
        }
      });
    },
  },
};
</script>

<style>
.el-header {
  background-color: #545c64;
}
.header-img {
  width: 100px;
  margin-top: 20px;
}
</style>
